<template>
<!-- 班级管理页面 -->
  <div id="classManage">
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right" style="margin-bottom:20px;">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>基础数据</el-breadcrumb-item>
      <el-breadcrumb-item :separator="$route.path">班级管理</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card shadow="always">
    <!-- 新增数据 -->
    <div class="modifypas">
      <span @click="handleAdd()">
        <i class="el-icon-circle-plus-outline"></i> 新增班级
      </span>
    </div>
    <!-- 表格 -->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column label="#" type="index"></el-table-column>
      <el-table-column label="班级名称" prop="className"></el-table-column>
      <el-table-column label="授课老师" prop="userName"></el-table-column>
      <el-table-column label="专业" prop="courseName"></el-table-column>
      <el-table-column label="班级人数" prop="classStudents"></el-table-column>
      <!-- prop="classCreateTime" -->
      <el-table-column label="开班日期" >
        <template slot-scope="scope">
            <span>{{ scope.row.classCreateTime | formatDate}}</span>
          </template>
      </el-table-column>
      <el-table-column label="操作" prop="classId">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <!-- 班级人数大于0时禁用该删除按钮 -->
          <el-button
            size="mini"
            type="danger"
            v-has
            :disabled="scope.row.classStudents > 0? true:false"
            @click="handleDelete(scope.$index, scope.row)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- dialog弹出框 -->
    <el-dialog
      :title="shows?'新增班级':'修改班级信息'"
      :visible.sync="dialogFormVisible"
      width="30%"
      :append-to-body="true"
      v-if="dialogFormVisible"
    >
      <el-form :model="form" label-width="80px" :rules="rules" ref="form" status-icon>
        <el-form-item label="班级名称" prop="name">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="专业课程" prop="value1">
          <el-select v-model="form.value1" placeholder="请选择课程">
            <el-option
              v-for="(item,index) in curriculum"
              :key="index"
              :label="item.courseName"
              :value="item.courseId"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="授课老师" prop="value2">
          <el-select v-model="form.value2" placeholder="请选择老师">
            <el-option
              v-for="(item,index) in teacher"
              :key="index"
              :label="item.userName"
              :value="item.userId"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" v-if="shows" @click="dialogAdd('form')">添 加</el-button>
        <el-button type="primary" v-if="!shows" @click="upDetermine">修 改</el-button>
      </div>
    </el-dialog>
    </el-card>
  </div>
</template>
<style lang="less" scoped>
.modifypas {
  height: 40px;
  text-align: left;
  padding-left: 15px;
  border-bottom: 1px solid #e9ebee;
  margin: 5px 0px;
  color: #409eff;
  font-weight: 800;
}
// 深度选择器
/deep/.el-dialog {
  .el-select {
    margin-left: 0px !important;
    float: left;
  }
  input::-webkit-input-placeholder {
    color: #606266;
  }
}

</style>

<script>
import { formatDate } from '../../uilt/timeHandle.js'
export default {
  data() {
    return {
      dialogFormVisible: false, // dialog弹出框
      tableData: [], //所有班级数据
      curriculum: [], //专业课程
      teacher: [], //授课老师
      shows: true, //增加修改
      classId: 0, //班级主键
      //表单验证规则
      rules: {
        name: [{ required: true, message: "请输入班级名称", trigger: "blur" }],
        value1: [{ required: true, message: "请选择课程", trigger: "change" }],
        value2: [{ required: true, message: "请选择老师", trigger: "change" }]
      },
      form: {
        name: "", //班级名称
        value1: "", //课程编号
        value2: "" //老师编号
      }
    };
  },
  methods: {
    //渲染
    renderingData() {
      let that = this;
      let dataA = new Promise((resolve)=>{
        that.axios.get("/api/Class/GetAllClass").then(res=>{
          resolve(res);
        })
      });
      let dataB = new Promise((resolve)=>{
        that.axios.get("/api/Class/GetAllCourse").then(res=>{
          resolve(res);
        })
      });
      let dataC = new Promise((resolve)=>{
        that.axios.get("/api/User/GetTeachers").then(res=>{
          resolve(res);
        })
      });
      Promise.all([dataA,dataB,dataC]).then(res=>{
        that.tableData = res[0].data;
        that.curriculum = res[1].data;
        that.teacher = res[2].data;
      })
    },
     //点击新增时
    handleAdd() {
      //清空数据
      for(let i in this.form){
        this.form[i] = "";
      }
      this.shows = true; //关闭修改按钮
      this.dialogFormVisible = true; //打开弹窗
    },
    //增加班级信息
    dialogAdd(formName) {
      let that = this;
      that.$refs[formName].validate(valid => {
        if (valid) {
         let index = that.tableData.findIndex(item=>
           item.className == that.form.name
          )
          if(index == -1){
          //请求接口传送数据
          that.axios
            .post("/api/Class/AddClass", {
              className: that.form.name,
              classCourseId: that.form.value1,
              classTeacherId: that.form.value2
            })
            .then(() => {
              that.dialogFormVisible = false;
              that.$message.success("新增成功!");
              that.renderingData();
            });
          }else{
            that.$message.error("班级名称重复!");
             return false;
          }
        }
      });
    },
   
    //点击修改
    handleEdit(index, row) {
      this.shows = false; //关闭添加按钮
      this.dialogFormVisible = true; //打开弹窗
      this.form.name = row.className; //赋值当前行数据
      this.form.value1 = row.classCourseId;
      this.form.value2 = row.classTeacherId;
      this.classId = row.classId;
    },
    //修改
    upDetermine() {
      let that = this;
      //请求接口
      that.axios
        .post("/api/Class/ModifyClass", {
          classId: that.classId,
          className: that.form.name,
          classCourseId: that.form.value1,
          classTeacherId: that.form.value2
        })
        .then(res => {
          //res.data.code == 0表示数据没有变更,=1则数据修改成功
          if (res.data.code == 0) {
            that.$message("数据没有任何变更");
          } else if (res.data.code == 1) {
            that.$message.success("修改成功!");
          }
          //关闭弹窗
          this.dialogFormVisible = false;
          that.renderingData();
        });
    },
    // 删除
    handleDelete(index, row) {
      let that = this;
      that
        .$confirm("确定要删除该条信息吗？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
        .then(() => {
          that.axios
            .get("/api/Class/RemoveClass?classId=" + row.classId)
            .then(res => {
              if (res.data.code == 1) {
                that.$message.success("删除成功!");
                 that.tableData.splice(index,1);
              } else if (res.data.code == -1) {
                that.$message.error("系统异常!");
              }
              
            });
        })
        .catch(() => {
          that.$message("已取消删除");
        });
    }
  },
  created() {
    this.renderingData();
  },
  //过滤器
   filters: {
    formatDate(time) {
    var date = new Date(time);
    return formatDate(date, 'yyyy-MM-dd');
   }
},

};
</script>
